<template>
  <div class="path-navigator-wrapper" v-show="!isFullScreenTable" v-cloak>
    <i class="ion-ios-home"></i>
    <ul class="list-inline">
      <li class="first" :class="{active : path.first && !path.second && !path.third}">{{path.first}}</li>
      <li class="sub-icon" v-show="path.second"><i class="ion-ios-arrow-forward"></i></li>
      <li class="second" :class="{active : path.second && !path.third}">{{path.second}}</li>
      <li class="third-icon" v-show="path.third"><i class="ion-ios-arrow-forward"></i></li>
      <li class="third" :class="{active : path.third}">{{path.third}}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      
    }
  },
  computed: {
    ...mapGetters({
      allMenu: 'getAllMenu',
      isFullScreenTable: 'getFullScreenTable'
    }),
    path: function() {
      let menuList = this.allMenu.list;
      let _tabList = this.$store.state.tab.list;
      let tag = [-1,-1,-1];
      let _first = '';
      let _second = '';
      let _third = '';
      if(_tabList.length > 0) {
        let _active = this.$store.state.tab.active;
        tag = _tabList[_active].tag ? _tabList[_active].tag : tag;
        
        let first = tag[0];
        let second = tag[1];
        let third = tag[2];
        _first = first >= 0 ? menuList[first].menuName : '';
        _second = first >= 0 && second >= 0 ? menuList[first].childMenuList[second].menuName : '';
        _third = first >= 0 && second >= 0 && third >= 0 ? menuList[first].childMenuList[second].childMenuList[third].menuName : '';
      }
      return {
        first : _first,
        second : _second,
        third : _third,
        tag : tag
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/less/base/variables.less";
@import "../assets/less/mixins/clearfix.less";
.path-navigator-wrapper{
  width: 100%;
  height: @pathNavH;
  line-height: @pathNavH;
  background-color: @cream;
  border-radius: 4px;
  padding-left: 20px;
  display: flex;
  overflow: hidden;
  > i {
    color: @blue;
    font-size: 20px;
    padding-right: 24px;
  }
  ul {
    .clearfix;
    li {
      float: left;
      font-size: 14px;
      padding: 0px 6px;
      color: @black;
      letter-spacing: 1px;
      &.active {
        color: @blue;
      }
    }
  }
}
</style>
